<template>
  <div class="svg-wrapper">
    <svg>
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path
            d="M 20 0 L 0 0 0 20"
            fill="none"
            stroke="#ccc"
            stroke-width="0.5"
          />
        </pattern>
      </defs>
      <rect id="grid-rect" width="100%" height="100%" fill="url(#grid)" />
      <!-- 示例图形 -->
      <circle cx="100" cy="100" r="50" fill="blue" />
      <rect x="200" y="100" width="60" height="40" fill="red" />
    </svg>
    <div class="actions"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  filters: {}
}
</script>

<style scoped lang="scss">
.svg-wrapper {
  height: 100%;
  position: relative;
  svg {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    height: 100%;
    width: 100%;
  }
  .actions {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    button {
      padding: 8px 16px;
      border: none;
      background-color: #409eff;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &:hover {
        background-color: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      // 重置按钮特殊样式
      &:last-child {
        background-color: #f56c6c;
        &:hover {
          background-color: #f78989;
        }
      }
    }
  }
}
</style>
